<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- 解决ie兼容 -->
        <!--[if lt IE 9]>
            <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
            <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
        <![endif]-->
        <title>阿里百秀</title>
        <!-- 引入相关样式 -->
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
        <link rel="stylesheet" href="./css/index.css" />
        <!-- 此案例中，这两js暂时用不到 -->
        <script src="./js/jquery.js"></script>
        <script src="./bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <!-- ------------------------------左侧 -->
                <header class="col-md-2">
                    <div class="logo">
                        <a href="#">
                            <!-- xs屏幕下会隐藏 -->
                            <img
                                src="./images/logo.png"
                                alt=""
                                class="hidden-xs"
                            />
                            <!-- xs屏幕下才会显现 -->
                            <span class="visible-xs">阿里百秀</span>
                        </a>
                    </div>
                    <div class="nav">
                        <ul>
                            <li>
                                <a href="#" class="glyphicon glyphicon-camera"
                                    >生活馆</a
                                >
                            </li>
                            <li>
                                <a href="#" class="glyphicon glyphicon-picture"
                                    >自然汇</a
                                >
                            </li>
                            <li>
                                <a href="#" class="glyphicon glyphicon-phone"
                                    >科技潮</a
                                >
                            </li>
                            <li>
                                <a href="#" class="glyphicon glyphicon-gift"
                                    >奇趣事</a
                                >
                            </li>
                            <li>
                                <a href="#" class="glyphicon glyphicon-glass"
                                    >美食杰</a
                                >
                            </li>
                        </ul>
                    </div>
                </header>
                <!-- ------------------------------中间 -->
                <article class="col-md-7">
                    <!-- 新闻头部 -->
                    <div class="news clearfix">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="./upload/news01.png" alt="" />
                                    <p>阿里百秀</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./upload/news02.png" alt="" />
                                    <p>
                                        奇了 成都一小区保安长得像马云
                                        居民纷纷求合影
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./upload/news03.png" alt="" />
                                    <p>
                                        海天一色，引起了很多人的好奇，其实海天一色并不是单纯的只有一个意思，而是代表了好几件事情
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./upload/news04.png" alt="" />
                                    <p>
                                        泰姬陵（Taj Mahal），是 印度
                                        知名度最高的古迹之一， 世界文化遗产
                                        ，被评选为“ 世界新七大奇迹 ”。
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./upload/news05.png" alt="" />
                                    <p>
                                        20世纪40年代开始， 美国
                                        上空发现会发光的椭圆盘飞行器，当时的报纸把它称为“椭圆形的发光体”，这是当代对不明飞行物的兴趣的开端。
                                    </p>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!-- 新闻内容 -->
                    <div class="publish">
                        <div class="row">
                            <!-- 超小屏幕xs以上的布局是统一的，可直接用sm代表【sm、md、lg】，因为min-width在数轴上是开口向右的 -->
                            <div class="col-sm-9">
                                <!-- h3标签、某些类名：都是bootstrap预定义好样式的，直接用 -->
                                <h3>
                                    生活馆 关于指甲的10个健康知识 你知道几个？
                                </h3>
                                <p class="text-muted hidden-xs">
                                    alibaixiu 发布于 2021-05-06
                                </p>
                                <p class="hidden-xs">
                                    把十个指甲放在阳光下观察，手指上下移动，如指甲表面有闪耀的反射，那就显示整体健康处于极佳状态，体内各器官的功能都完好正常。
                                </p>
                                <p class="text-muted">
                                    阅读(2254) 评论(1) 赞(20)
                                    <span class="hidden-xs"
                                        >标签：健康 / 感染 / 指甲 / 疾病 / 皮肤
                                        / 营养 / 趣味生活</span
                                    >
                                </p>
                            </div>
                            <div class="col-sm-3 pic hidden-xs">
                                <img src="./upload/item01.png" alt="" />
                            </div>
                        </div>
                        <div class="row">
                            <!-- 超小屏幕xs以上的布局是统一的，可直接用sm代表【sm、md、lg】，因为min-width在数轴上是开口向右的 -->
                            <div class="col-sm-9">
                                <!-- h3标签、某些类名：都是bootstrap预定义好样式的，直接用 -->
                                <h3>
                                    生活馆 关于指甲的10个健康知识 你知道几个？
                                </h3>
                                <p class="text-muted hidden-xs">
                                    alibaixiu 发布于 2021-05-06
                                </p>
                                <p class="hidden-xs">
                                    把十个指甲放在阳光下观察，手指上下移动，如指甲表面有闪耀的反射，那就显示整体健康处于极佳状态，体内各器官的功能都完好正常。
                                </p>
                                <p class="text-muted">
                                    阅读(2254) 评论(1) 赞(20)
                                    <span class="hidden-xs"
                                        >标签：健康 / 感染 / 指甲 / 疾病 / 皮肤
                                        / 营养 / 趣味生活</span
                                    >
                                </p>
                            </div>
                            <div class="col-sm-3 pic hidden-xs">
                                <img src="./upload/item01.png" alt="" />
                            </div>
                        </div>
                        <div class="row">
                            <!-- 超小屏幕xs以上的布局是统一的，可直接用sm代表【sm、md、lg】，因为min-width在数轴上是开口向右的 -->
                            <div class="col-sm-9">
                                <!-- h3标签、某些类名：都是bootstrap预定义好样式的，直接用 -->
                                <h3>
                                    生活馆 关于指甲的10个健康知识 你知道几个？
                                </h3>
                                <p class="text-muted hidden-xs">
                                    alibaixiu 发布于 2021-05-06
                                </p>
                                <p class="hidden-xs">
                                    把十个指甲放在阳光下观察，手指上下移动，如指甲表面有闪耀的反射，那就显示整体健康处于极佳状态，体内各器官的功能都完好正常。
                                </p>
                                <p class="text-muted">
                                    阅读(2254) 评论(1) 赞(20)
                                    <span class="hidden-xs"
                                        >标签：健康 / 感染 / 指甲 / 疾病 / 皮肤
                                        / 营养 / 趣味生活</span
                                    >
                                </p>
                            </div>
                            <div class="col-sm-3 pic hidden-xs">
                                <img src="./upload/item01.png" alt="" />
                            </div>
                        </div>
                        <div class="row">
                            <!-- 超小屏幕xs以上的布局是统一的，可直接用sm代表【sm、md、lg】，因为min-width在数轴上是开口向右的 -->
                            <div class="col-sm-9">
                                <!-- h3标签、某些类名：都是bootstrap预定义好样式的，直接用 -->
                                <h3>
                                    生活馆 关于指甲的10个健康知识 你知道几个？
                                </h3>
                                <p class="text-muted hidden-xs">
                                    alibaixiu 发布于 2021-05-06
                                </p>
                                <p class="hidden-xs">
                                    把十个指甲放在阳光下观察，手指上下移动，如指甲表面有闪耀的反射，那就显示整体健康处于极佳状态，体内各器官的功能都完好正常。
                                </p>
                                <p class="text-muted">
                                    阅读(2254) 评论(1) 赞(20)
                                    <span class="hidden-xs"
                                        >标签：健康 / 感染 / 指甲 / 疾病 / 皮肤
                                        / 营养 / 趣味生活</span
                                    >
                                </p>
                            </div>
                            <div class="col-sm-3 pic hidden-xs">
                                <img src="./upload/item01.png" alt="" />
                            </div>
                        </div>
                        <div class="row">
                            <!-- 超小屏幕xs以上的布局是统一的，可直接用sm代表【sm、md、lg】，因为min-width在数轴上是开口向右的 -->
                            <div class="col-sm-9">
                                <!-- h3标签、某些类名：都是bootstrap预定义好样式的，直接用 -->
                                <h3>
                                    生活馆 关于指甲的10个健康知识 你知道几个？
                                </h3>
                                <p class="text-muted hidden-xs">
                                    alibaixiu 发布于 2021-05-06
                                </p>
                                <p class="hidden-xs">
                                    把十个指甲放在阳光下观察，手指上下移动，如指甲表面有闪耀的反射，那就显示整体健康处于极佳状态，体内各器官的功能都完好正常。
                                </p>
                                <p class="text-muted">
                                    阅读(2254) 评论(1) 赞(20)
                                    <span class="hidden-xs"
                                        >标签：健康 / 感染 / 指甲 / 疾病 / 皮肤
                                        / 营养 / 趣味生活</span
                                    >
                                </p>
                            </div>
                            <div class="col-sm-3 pic hidden-xs">
                                <img src="./upload/item01.png" alt="" />
                            </div>
                        </div>
                    </div>
                </article>
                <!-- ------------------------------右侧 -->
                <aside class="col-md-3">
                    <a href="#" class="banner">
                        <img src="./upload/zgboke.png" alt="" />
                    </a>
                    <a href="#" class="hot">
                        <span class="btn btn-primary">热搜</span>
                        <h4 class="text-primary">欢迎加入中国博客联盟</h4>
                        <p class="text-muted">
                            中国博客联盟，收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台......
                        </p>
                    </a>
                </aside>
            </div>
        </div>
    </body>
</html>
